<!doctype html>
<html class="x-admin-sm" lang="en"  xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <title>视频播放</title>
    <meta charset="utf-8">
    <META HTTP-EQUIV="pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
    <META HTTP-EQUIV="expires" CONTENT="0">
    <link type="text/css" rel="stylesheet" href="static/dist/sms/css/style.css">
</head>
<body style="margin:0;padding:0;background-color:#0C0C0C;">
    <input type="hidden" id="serialId" th:value="${data}">
    <input type="hidden" id="hostPort" th:value="${httpUrl}">
    <img id="videoImg" title="点击视频可抓取图片" src="static/dist/sms/img/media.jpg"/>
</body>
<script type="text/javascript" src="static/dist/sms/js/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="static/dist/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['layer'], function(){
        var layer = layui.layer, hostPort = $("#hostPort").val()||'127.0.0.1:9999', websocket = null;

        //判断浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            websocket = new WebSocket("ws://" + hostPort + "/sms/play/"+($("#serialId").val()||''));
        }else if ('MozWebSocket' in window) {
            websocket = new MozWebSocket("ws://" + hostPort + "/sms/play/"+($("#serialId").val()||''));
        }

        websocket.onopen = onOpen;
        websocket.onmessage = onMessage;
        websocket.onerror = onError;
        websocket.onclose = onClose;

        function onOpen(result) {
            console.log("与服务端已建立连接:"+JSON.stringify(result))
            //layer.msg("与服务端已建立连接:"+JSON.stringify(result),{icon:1});
        }

        function onMessage(result) {
            $("#videoImg").attr('src', 'data:image/png;base64,'+result.data);
        }

        function onError(result) {
            layer.alert("通信发生错误时触发:"+result.data,{title:'信息提示', icon: 2});
        }

        function onClose(result) {
            layer.alert("连接关闭时触发:"+result.data,{title:'信息提示', icon: 0});
        }

        $("#videoImg").click(function(){
            var base64Img = $(this).attr('src');
            if(base64Img){
                console.log(base64Img);
                layer.msg("图片抓取成功");
            }
        });
    });
</script>
</html>